<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
	<meta charset="UTF-8">
	<link rel="shortcut icon" th:href="@{/fav.ico}">
	<link rel="stylesheet" th:href="@{/css/iconfont.css}">
	<link rel="stylesheet" th:href="@{/css/global.css}">
	<link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
	<link rel="stylesheet" th:href="@{/css/bootstrap-theme.min.css}">
	<link rel="stylesheet" th:href="@{/css/swiper.min.css}">
	<link rel="stylesheet" th:href="@{/css/styles.css}">
	<script th:src="@{/js/jquery.1.12.4.min.js}" charset="UTF-8"></script>
	<script th:src="@{/js/bootstrap.min.js}" charset="UTF-8"></script>
	<script th:src="@{/js/swiper.min.js}" charset="UTF-8"></script>
	<script th:src="@{/js/global.js}" charset="UTF-8"></script>
	<title>物流查询</title>
</head>
<body>

	<div class="user-content__box clearfix bgf">
		<div class="title">服务中心-物流查询</div>
		<form action="" class="user-addr__form form-horizontal" role="form">
			<div class="input-group col-sm-6">
				<input class="form-control" placeholder="快递单号" type="text">
				<span class="input-group-btn">
					<button class="btn btn-primary" type="button">查询</button>
				</span>
			</div>
			<div class="help-block">例如，您可以输入：<span class="cr">40105060123</span></div>
			<div class="query-result__box"></div>
			<script>
				$(document).ready(function(){
					// 模拟查询请求
					$('.btn-primary').on('click',function() {
						if ($('.form-control').val() == '40105060123') {
							$('.query-result__box').html('成功查询到数据，返回个html/json在这里展示！');
						} else {
							$('.query-result__box').html(`
								<div class="no-date">
									<p class="cr">很抱歉，您的快递单号暂时没有查询结果！</p>
									<p class="fz12 c6">您可以检查下快递单号是否正确</p>
								</div>
							`);
						}
					});
				});
			</script>
		</form>
	</div>

</body>
</html>